<template>
  <div>
    <el-tabs
      v-model="activeName"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="userAttribs"
        name="userAttribs"
      >
        <markdown-view :content="params.userAttribs"></markdown-view>
      </el-tab-pane>
      <el-tab-pane
        label="evaluations"
        name="evaluations"
      >
        <markdown-view :content="params.evaluations"></markdown-view>
      </el-tab-pane>
      <el-tab-pane
        label="subjects"
        name="subjects"
      >
        <markdown-view :content="params.subjects"></markdown-view>
      </el-tab-pane>

    </el-tabs>

  </div>
</template>

<script>
  import MarkdownView from '@/components/markdown/index.vue';
  export default {
    name: 'documentsView',
    components: {
      MarkdownView,
    },
    computed: {
      params() {
        return {
          userAttribs: "# userAttribs\n\n```json\n" + JSON.stringify(this.$store.state.params.userAttribs, null, 2) + "\n```\n",
          evaluations: "# evaluations\n\n```json\n" + JSON.stringify(this.$store.state.params.evaluations, null, 2) + "\n```\n",
          subjects: "# subjects\n\n```json\n" + JSON.stringify(this.$store.state.params.subjects, null, 2) + "\n```\n",
        }
      }
    },
    data() {
      return {
        activeName: 'userAttribs',
      }
    },
    methods: {
      handleClick(e) {
        console.log(e);
      }
    }
  }
</script>